<style>
    #cxselect-example textarea {
        margin: 10px 0;
    }

    .search_title {
        height: 31px;
        line-height: 31px;
        width: 120px;
        margin-left: 20px;
    }

    .hangnei {
        display: inline-flex;
    }

    .col-md-4 {
        width: 200px;
    }

    .title-middle {
        text-align: center;
    }

</style>
<div class="panel panel-default panel-intro">
    <!--    {:build_heading()}-->

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding" id="cxselect-example">
                    <form id="forms1" action="index/index" method="post">
                        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
                            <h4>数据统计</h4>
                            <hr>
                            <div class="row">
                                <div class="form-group col-xs-12 col-md-4 col-lg-3 hangnei">
                                    <label class="control-label search_title">数据类型</label>
                                    <!--显式的operate操作符-->
                                    <select name="game_type" class="form-control operate" data-name="id" style="width:120px;">
                                        <option value="0" selected>全部</option>
                                        <option value="1">端游</option>
                                        <option value="2">手游</option>
                                    </select>
                                </div>

                                <div class="form-group col-xs-12 col-md-4 col-lg-3 hangnei">
                                    <label class="control-label search_title">时间</label>
                                    <!--显式的operate操作符-->
                                    <div class="col-xs-8">
<!--                                        <div class="input-group-btn">-->
<!--                                            <input type="text" class="form-control datetimerange" name="startTime" style="width: 180px;" value="" id="start_time" data-index="12" onfocus="getdaterangepicker(form)" autocomplete="off">-->
<!--                                        </div>-->
                                        <select class="form-control operate" name="startTime" style="width:120px;">
                                            <option value="1">今日/昨天</option>
                                            <option value="2">本周/上周</option>
                                            <option value="3">本月/上月</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-md-4 col-lg-3 hangnei" style="margin-left: 50px;">
                                    <label class="control-label search_title">游戏</label>
                                    <!--显式的operate操作符-->
                                    <div class="col-xs-8">
                                        <div class="input-group-btn">
                                            <select class="form-control operate" name="gamename" style="width:120px;">
                                                <option value="0" selected>全部</option>
                                                {foreach name='$gameList'  item="select"}
                                                <option value="{$select['id']}">{$select['game']}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-md-4 col-lg-3 hangnei">
                                    <label class="control-label search_title">小组</label>
                                    <!--显式的operate操作符-->
                                    <div class="col-xs-8">
                                        <div class="input-group-btn">
                                            <select class="form-control operate" name="staffname" data-name="id" style="width:120px;">
                                                <option value="0" selected>全部</option>
                                                {foreach name='$staffList'  item="selec"}
                                                <option value="{$selec['id']}">{$selec['group_name']}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-md-4 col-lg-3 hangnei">
                                    <label class="control-label search_title">工号</label>
                                    <!--显式的operate操作符-->
                                    <div class="col-xs-8">
                                        <div class="input-group-btn">
                                            <input type="text" style="width: 100px;" placeholder="员工工号"
                                                   class="form-control" name="gonghao"
                                                   value=""/>
                                        </div>
                                    </div>
                                </div>


                                <div class="col-xs-12 col-sm-6 col-lg-3">
                                    <div class="row">
                                        <div class="col-xs-6">
                                            <input type="button" style="width: 50px;" onclick="search()" class="btn btn-success btn-block"
                                                   value="提交"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--  111 -->
                        <div class="row" style="margin-top:15px;" id="statistics">

                            <div class="col-lg-12">
                            </div>
                            <div class="col-xs-6 col-md-3">
                                <div class="panel bg-blue-gradient no-border">
                                    <div class="panel-body">
                                        <div class="panel-title title-middle">
                                            <h5>录入商品数</h5>
                                        </div>
                                        <div class="panel-content">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h1 class="no-margins title-middle"><span id="good1">{$data.now_goods}</span>/<span id="good2">{$data.yestoday_goods}</span></h1>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6 col-md-3">
                                <div class="panel bg-aqua-gradient no-border">
                                    <div class="panel-body">
                                        <div class="ibox-title title-middle">
                                            <h5>订单数</h5>
                                        </div>
                                        <div class="ibox-content">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h1 class="no-margins title-middle"><span id="order1">{$data.now_order}</span>/<span id="order2">{$data.yestoday_order}</span></h1>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-6 col-md-3">
                                <div class="panel bg-purple-gradient no-border">
                                    <div class="panel-body">
                                        <div class="ibox-title title-middle">
                                            <h5>成交订单数</h5>
                                        </div>
                                        <div class="ibox-content">

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h1 class="no-margins title-middle"><span id="orderfinish1">{$data.now_finish_order}</span>/<span id="orderfinish2">{$data.yestoday_finish_order}</span></h1>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6 col-md-3">
                                <div class="panel bg-green-gradient no-border">
                                    <div class="panel-body">
                                        <div class="ibox-title title-middle">
                                            <h5>成交金额</h5>
                                        </div>
                                        <div class="ibox-content">

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h1 class="no-margins title-middle"><span id="orderamount1">{$data.now_finish_amount}</span>/<span id="orderamount2">{$data.yestoday_finish_amount}</span></h1>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--  2222   -->
                        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
                            <h4>排行榜</h4>
                            <hr>
                            <div class="row">
                                <div class="form-group col-xs-12 col-md-4 col-lg-3 hangnei">
                                    <label class="control-label search_title">数据类型</label>
                                    <!--显式的operate操作符-->
                                    <select name="game_type1" class="form-control operate" data-name="id" style="width:120px;">
                                        <option value="0" selected>全部</option>
                                        <option value="1" {if condition = "$game_type eq 1"}selected{/if}>端游</option>
                                        <option value="2" {if condition = "$game_type eq 2"}selected{/if}>手游</option>
                                    </select>
                                </div>

                                <div class="form-group col-xs-12 col-md-4 col-lg-3 hangnei">
                                    <label class="control-label search_title">统计方式</label>
                                    <!--显式的operate操作符-->
                                    <select name="game_staff" class="form-control operate" data-name="id" style="width:180px;">
                                        <option value="1">按员工统计</option>
                                        <option value="2">按小组统计</option>
                                    </select>
                                </div>

                                <div class="form-group col-xs-12 col-md-4 col-lg-3 hangnei">
                                    <label class="control-label search_title">游戏</label>
                                    <!--显式的operate操作符-->
                                    <div class="col-xs-8">
                                        <div class="input-group-btn">
                                            <select class="form-control operate" name="gamename1" style="width:120px;">
                                                <option value="0" selected>全部</option>
                                                {foreach name='$gameList'  item="select"}
                                                <option value="{$select['id']}" {if condition = "$select['id'] eq $gamename"}selected{/if}>{$select['game']}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-md-4 col-lg-3 hangnei">
                                    <label class="control-label search_title">时间</label>
                                    <!--显式的operate操作符-->
                                    <div class="col-xs-8">
                                            <div class="input-group-btn">
                                                <input type="text" class="form-control datetimerange" value="{$gametime}" name="gametime" style="width: 180px;" value="" id="start_time" data-index="12" onfocus="getdaterangepicker(form)" autocomplete="off">
                                            </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-md-4 col-lg-3 hangnei" style="margin-left: 50px;">
                                    <label class="control-label search_title">小组</label>
                                    <!--显式的operate操作符-->
                                    <div class="col-xs-8">
                                        <div class="input-group-btn">
                                            <select class="form-control operate" name="staffname1" data-name="id" style="width:120px;">
                                                <option value="0" selected>全部</option>
                                                {foreach name='$staffList'  item="selec"}
                                                <option value="{$selec['id']}" {if condition = "$selec['id'] eq $staffname"}selected{/if}>{$selec['group_name']}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>
                                </div>


                                <div class="col-xs-12 col-sm-6 col-lg-3">
                                    <div class="row">
                                        <div class="col-xs-6">
                                            <input type="button" onclick="search_statis()" style="width: 50px;" class="btn btn-success btn-block"
                                                   value="提交"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div style="display: inline-flex;width: 100%;">
                        <table style="width: 24%;height: 100%;border: 1px solid #ccc;margin:10px 10px;">
                            <th class="title-middle" style="height: 25px;">
                            <td colspan="2">录入商品个数：</td>
                            </th>
                            {foreach name="goods_list" item = "vo" key="key"}
                            <tr class="title-middle" style="height: 25px;border-bottom: 1px solid #ddd;">
                                <td>{$key+1}</td>
                                <td>{$vo.name}({$vo.invite})</td>
                                <td>{$vo.count}</td>
                            </tr>
                            {/foreach}
                        </table>

                        <table style="width: 24%;height: 100%;border: 1px solid #ccc;margin:10px 10px;">
                            <th class="title-middle" style="height: 25px;">
                            <td colspan="2">订单数：</td>
                            </th>
                            {foreach name="dingdanshu" item = "vo" key="key"}
                            <tr class="title-middle" style="height: 25px;border-bottom: 1px solid #ddd;">
                                <td>{$key+1}</td>
                                <td>{$vo.name}({$vo.invite})</td>
                                <td>{$vo.count}</td>
                            </tr>
                            {/foreach}
                        </table>

                        <table style="width: 24%;height: 100%;border: 1px solid #ccc;margin:10px 10px;">
                            <th class="title-middle" style="height: 25px;">
                            <td colspan="2">成交订单数：</td>
                            </th>
                            {foreach name="chengjiaoshu" item = "vo" key="key"}
                            <tr class="title-middle" style="height: 25px;border-bottom: 1px solid #ddd;">
                                <td>{$key+1}</td>
                                <td>{$vo.name}({$vo.invite})</td>
                                <td>{$vo.finish}</td>
                            </tr>
                            {/foreach}
                        </table>

                        <table style="width: 24%;height: 100%;border: 1px solid #ccc;margin:10px 10px;">
                            <th class="title-middle" style="height: 25px;">
                            <td colspan="2">成交金额：</td>
                            </th>
                            {foreach name="chengjiaojine" item = "vo" key="key"}
                            <tr class="title-middle" style="height: 25px;border-bottom: 1px solid #ddd;">
                                <td>{$key+1}</td>
                                <td>{$vo.name}({$vo.invite})</td>
                                <td>{$vo.amount}(收入:{$vo.total_fee})</td>
                            </tr>
                            {/foreach}
                        </table>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="/assets/js/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker.css"/>
<script>
    function search(){
        var game_type = $("select[name=game_type]").find("option:selected").val();
        var game_time = $("select[name=startTime]").find("option:selected").val();
        var gamename = $("select[name=gamename]").find("option:selected").val();
        var staffname = $("select[name=staffname]").find("option:selected").val();
        var gonghao = $("input[name=gonghao]").val();
        var url = "extension/index/search_info"
        $.ajax({
            type:'post',
            url:url,
            data:{game_type:game_type,game_time:game_time,gamename:gamename,staffname:staffname,gonghao:gonghao},
            success:function(res){
                var result = JSON.parse(res)
                $("#good1").html(result.luru_num)
                $("#good2").html(result.luru_num_1)
                $("#order1").html(result.order_num)
                $("#order2").html(result.order_num_1)
                $("#orderfinish1").html(result.order_finish)
                $("#orderfinish2").html(result.order_finish_1)
                $("#orderamount1").html(result.order_amount)
                $("#orderamount2").html(result.order_amount_1)
            }
        })
    }

    function search_statis(){
        var game_type = $("select[name=game_type1]").find("option:selected").val();
        var game_staff = $("select[name=game_staff]").find("option:selected").val();
        var gamename = $("select[name=gamename1]").find("option:selected").val();
        var gametime = $("input[name=gametime]").val();
        var staffname = $("select[name=staffname1]").find("option:selected").val();
        // var url = "http://test.780.com/BfcTyWlLqd.php/extension/index";
        var url = "https://ceshi.780g.com/BfcTyWlLqd.php/extension/index";
        $( "#forms1" ).attr( 'action' ,url);
        $("#forms1").submit();
        // $.ajax({
        //     type:'post',
        //     url:url,
        //     data:{game_type:game_type,game_staff:game_staff,gamename:gamename,staffname:staffname,gonghao:gonghao},
        //     success:function(res){
        //         var result = JSON.parse(res)
        //         $("#good1").html(result.luru_num)
        //         $("#good2").html(result.luru_num1)
        //         $("#order1").html(result.order_num)
        //         $("#order2").html(result.order_num_1)
        //         $("#orderfinish1").html(result.order_finish)
        //         $("#orderfinish2").html(result.order_finish_1)
        //         $("#orderamount1").html(result.order_amount)
        //         $("#orderamount2").html(result.order_amount_1)
        //     }
        // })
    }

    $('input[name="dates"]').daterangepicker();
    function getdaterangepicker(form) {
        //绑定日期时间元素事件
        if ($(".datetimerange", form).size() > 0) {
            require(['bootstrap-daterangepicker'], function () {
                var ranges = {};
                ranges[__('Today')] = [Moment().startOf('day'), Moment().endOf('day')];
                ranges[__('Yesterday')] = [Moment().subtract(1, 'days').startOf('day'), Moment().subtract(1, 'days').endOf('day')];
                ranges[__('Last 7 Days')] = [Moment().subtract(6, 'days').startOf('day'), Moment().endOf('day')];
                ranges[__('Last 30 Days')] = [Moment().subtract(29, 'days').startOf('day'), Moment().endOf('day')];
                ranges[__('This Month')] = [Moment().startOf('month'), Moment().endOf('month')];
                ranges[__('Last Month')] = [Moment().subtract(1, 'month').startOf('month'), Moment().subtract(1, 'month').endOf('month')];
                var options = {
                    timePicker: false,
                    autoUpdateInput: false,
                    timePickerSeconds: true,
                    timePicker24Hour: true,
                    autoApply: true,
                    locale: {
                        format: 'YYYY-MM-DD HH:mm:ss',
                        customRangeLabel: __("Custom Range"),
                        applyLabel: __("Apply"),
                        cancelLabel: __("Clear"),
                    },
                    ranges: ranges,
                };
                var origincallback = function (start, end) {
                    $(this.element).val(start.format(this.locale.format) + " - " + end.format(this.locale.format));
                    $(this.element).trigger('blur');
                };
                $(".datetimerange", form).each(function () {
                    var callback = typeof $(this).data('callback') == 'function' ? $(this).data('callback') : origincallback;
                    $(this).on('apply.daterangepicker', function (ev, picker) {
                        callback.call(picker, picker.startDate, picker.endDate);
                    });
                    $(this).on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('').trigger('blur');
                    });
                    $(this).daterangepicker($.extend(true, options, $(this).data()), callback);
                });
            });
        }
    }
</script>